<template>
  <div>
    <div style="margin: 20px 0">
      <a-button
        type="primary"
        style="background: #66b1ff; color: #fff; border: none"
        @click="closeStorageDetail"
      >
        返回仓租明细
      </a-button>
      <a-button
        type="primary"
        style="
          background: #66b1ff;
          color: #fff;
          border: none;
          margin-left: 20px;
        "
        @click="downloadFile"
      >
        <a-icon type="download" />导出明细
      </a-button>
    </div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-table :columns="columns" :data-source="tableList" :pagination="false">
        <span slot="cost" slot-scope="text, record">
          {{ record.cost }}{{ record.currency }}
        </span>
        <span slot="action" slot-scope="text, record">
          <a
            href="javascript:;"
            style="text-decoration: underline; color: rgb(41, 41, 224)"
            @click="storageDetail(record)"
            >仓租明细
          </a>
        </span>
      </a-table>
    </a-spin>
  </div>
</template>

<script>
import req from "@/utils/req";
import {
  issuing_selectWhBillInfo,
  issuing_selectWhBillExcel,
  transfer_selectTransferBillInfo,
  transfer_selectTransferBillExcel,
  return_selectWhCostBillInfo,
  return_selectWhCostBillInfoExcel,
} from "@/apis/system/FinanceManagement/FinanceManagement";
export default {
  props: ["tabRowData", "tabKey"],
  mounted() {
    if (this.tabKey == "1") {
      this.getTableList();
    } else if (this.tabKey == "2") {
      this.getTransferTableList();
    } else if (this.tabKey == "3") {
      this.getReturnTableList();
    }
  },
  data() {
    return {
      spinning: false,
      tableList: [],
    };
  },
  methods: {
    // 获取代发仓租明细表格
    async getTableList() {
      this.spinning = true;
      const { code, responseBody } = await issuing_selectWhBillInfo({
        tenantId: this.tabRowData.tenantId,
        warehousingId: this.tabRowData.warehousingId,
        startDate: this.tabRowData.clearingTime,
      });
      if (code === "200") {
        this.spinning = false;
        this.tableList = responseBody;
      }
    },
    // 获取转运仓租明细表格
    async getTransferTableList() {
      this.spinning = true;
      const { code, responseBody } = await transfer_selectTransferBillInfo({
        tenantId: this.tabRowData.tenantId,
        warehousingId: this.tabRowData.warehousingId,
        startDate: this.tabRowData.settlementTime,
      });
      if (code === "200") {
        this.spinning = false;
        this.tableList = responseBody;
      }
    },
    // 获取退件仓租明细表格
    async getReturnTableList() {
      this.spinning = true;
      const { code, responseBody } = await return_selectWhCostBillInfo({
        tenantId: this.tabRowData.tenantId,
        warehousingId: this.tabRowData.warehousingId,
        startDate: this.tabRowData.clearingTime,
      });
      if (code === "200") {
        this.spinning = false;
        this.tableList = responseBody;
      }
    },
    //关闭仓租明细
    closeStorageDetail() {
      this.$emit("closeStorageDetail");
    },
    //下载表格文件
    async downloadFile() {
      if (this.tabKey == "1") {
        let res = await issuing_selectWhBillExcel({
          tenantId: this.tabRowData.tenantId,
          warehousingId: this.tabRowData.warehousingId,
          startDate: this.tabRowData.clearingTime,
        });
        req.exportFile(
          `${this.tabRowData.warehousingName}-${
            this.tabRowData.tenantId
          }-${this.tabRowData.clearingTime.substring(0, 10)}-${
            this.tabRowData.currency
          }`,
          res
        );
      } else if (this.tabKey == "2") {
        let res = await transfer_selectTransferBillExcel({
          tenantId: this.tabRowData.tenantId,
          warehousingId: this.tabRowData.warehousingId,
          startDate: this.tabRowData.settlementTime,
        });
        req.exportFile(
          `${this.tabRowData.warehouseName}-${
            this.tabRowData.tenantId
          }-${this.tabRowData.settlementTime.substring(0, 10)}-${
            this.tabRowData.currency
          }`,
          res
        );
      } else if (this.tabKey == "3") {
        let res = await return_selectWhCostBillInfoExcel({
          tenantId: this.tabRowData.tenantId,
          warehousingId: this.tabRowData.warehousingId,
          startDate: this.tabRowData.clearingTime,
        });
        req.exportFile(
          `${this.tabRowData.warehousingName}-${
            this.tabRowData.tenantId
          }-${this.tabRowData.clearingTime.substring(0, 10)}-${
            this.tabRowData.currency
          }`,
          res
        );
      }
    },
  },
  computed: {
    columns() {
      switch (this.tabKey) {
        case "1":
          return [
            {
              title: "SKU",
              dataIndex: "sku",
              align: "center",
              scopedSlots: { customRender: "sku" },
            },
            {
              title: "体积(m³)",
              dataIndex: "volume",
              align: "center",
              scopedSlots: { customRender: "volume" },
            },
            {
              title: "到期数量(个)",
              dataIndex: "skuCount",
              scopedSlots: { customRender: "skuCount" },
              align: "center",
            },
            {
              title: "库龄(天)",
              dataIndex: "numberOfDays",
              scopedSlots: { customRender: "numberOfDays" },
              align: "center",
              // ellipsis: true,
            },
            {
              title: "仓租规则",
              dataIndex: "ruleName",
              scopedSlots: { customRender: "ruleName" },
              align: "center",
            },
            {
              title: "费用",
              dataIndex: "cost",
              scopedSlots: { customRender: "cost" },
              align: "center",
            },
          ];
        case "2":
          return [
            {
              title: "订单编号",
              dataIndex: "ordeCode",
              align: "center",
              scopedSlots: { customRender: "ordeCode" },
            },
            {
              title: "货物编号",
              dataIndex: "goodsBoxNo",
              align: "center",
              scopedSlots: { customRender: "goodsBoxNo" },
            },
            {
              title: "体积(m³)",
              dataIndex: "volume",
              align: "center",
              scopedSlots: { customRender: "volume" },
            },
            {
              title: "到期数量(箱) ",
              dataIndex: "total",
              scopedSlots: { customRender: "total" },
              align: "center",
            },
            {
              title: "库龄(天)",
              dataIndex: "warehouseAge",
              scopedSlots: { customRender: "warehouseAge" },
              align: "center",
              // ellipsis: true,
            },
            {
              title: "仓租规则",
              dataIndex: "roleTitle",
              scopedSlots: { customRender: "roleTitle" },
              align: "center",
            },
            {
              title: "费用",
              dataIndex: "expenses",
              scopedSlots: { customRender: "expenses" },
              align: "center",
            },
          ];
        case "3":
          return [
            {
              title: "退件编号",
              dataIndex: "ordeCode",
              align: "center",
              scopedSlots: { customRender: "ordeCode" },
            },
            {
              title: "体积(m³)",
              dataIndex: "volume",
              align: "center",
              scopedSlots: { customRender: "volume" },
            },
            {
              title: "到期数量(箱)",
              dataIndex: "packingNumber",
              scopedSlots: { customRender: "packingNumber" },
              align: "center",
            },
            {
              title: "库龄(天)",
              dataIndex: "numberOfDays",
              scopedSlots: { customRender: "numberOfDays" },
              align: "center",
              // ellipsis: true,
            },
            {
              title: "仓租规则",
              dataIndex: "ruleName",
              scopedSlots: { customRender: "ruleName" },
              align: "center",
            },
            {
              title: "费用",
              dataIndex: "cost",
              scopedSlots: { customRender: "cost" },
              align: "center",
            },
          ];
        default:
          return [];
      }
    },
  },
};
</script>

<style lang="less" scoped>
</style>